<template>
  <div style="background-color: #f1f1f1; height: 100vh">
    <CflowEditorLoader :nodes-value="nodes" :isPanning="false" :isZoom="false" :isPview="false" :isRightConfig="false"
      ref="CflowEditorLoaderRef" @handleDragMove="handleDragMove" @editNode="editNode" @getcanvasSize="getcanvasSize"
      @getConnectionsValue="getConnectionsValue" @saveNodes="saveNodes" @getNodesValue="getNodesValue" :bg="logo"
      isConnectionType :canvas-size="{
        width: 1460,
        height: 1080,
      }">
      <template #left>
        <div v-for="item in nodeTypes" draggable="true" @dragstart="startDrag($event, item)">
          {{ item.label }}
        </div>
      </template>
      <template #content="{ node }">
        <div v-show="isShow && node.id === isId" ref="boxRef" class="box">
          {{ node.label }}
        </div>
      </template>
      <template #slotName="{ node }">
        <div @click="click(node)" class="hover" :class="node.a === 1 ? 'a' : 'b'">5454</div>
      </template>
      <template #right-config="{ selectNode }">
        <input type="text" v-model="selectNode.label" />
        <input type="text" v-model="selectNode.x" />
      </template>
    </CflowEditorLoader>
    <Cdialog width="800" ref="CdialogRef">
      <div style="width: 100%; height: 100%; overflow: auto">
        <FlowPview :isPan="true" :is-zoom="true" ref="FlowPviewRef" @editNode="editNode" :bg="logo"
          :connections="connections" :nodesValue="nodes2">
          <template #slotName="{ node }">
            <div @click="click(node)" class="hover" :class="node.a === 1 ? 'a' : 'b'">5454</div>
          </template>
        </FlowPview>
      </div>
    </Cdialog>
  </div>
</template>
<script lang="ts" setup>
import logo from './logo.png'
import CflowEditorLoader from '../components/CflowEditorLoader.vue'
import FlowPview from '../components/FlowPview.vue'
import Cdialog from '../components/Cdialog/Cdialog.vue'
import { ref } from 'vue'
const FlowPviewRef = ref()
const CdialogRef = ref()
const ishow = ref(true)
const boxRef = ref()
const nodeTypes = ref([
  { type: 'start', label: '节点', width: 50, height: 50, color: 'green' },
  { type: 'slot', label: '自定义', width: 50, height: 50, color: '#000', slotName: 'slotName' },
  { type: 'html', label: 'html', width: 50, height: 50, color: '', target: `<h1>HTML</h1>` },
  // { type: 'rect', label: '', width: 50, height: 50, color: '#f0f0f0' }
])
const CflowEditorLoaderRef = ref()
// const nodeTypes = ref([
// ])
const isId = ref()
const click = (node) => {
  const obj = FlowPviewRef.value.setNodesConfig(node.id, 'a', 2)
}
const handleDragMove = (node) => {
  if (node.id === isId) {
    editNode(node)
  }
}
const isShow = ref(false)
const editNode = (node) => {
  CflowEditorLoaderRef.value.setCanvasOffset({ x: 0, y: 0 })
  CflowEditorLoaderRef.value.canvasInit({ x: 0, y: 0 })
  isId.value = node.id
  isShow.value = false
  boxRef.value.style.left = '50%'
  boxRef.value.style.top = '100%'
  boxRef.value.style.transform = 'translateX(-50%)'
  CflowEditorLoaderRef.value.setNodesConfig(node.id, 'color', 'pink')
}

const startDrag = (event, nodeData) => {
  const node = {
    ...nodeData,
    id: Date.now(),
    // type: nodeData.type,
    // id: Date.now(),
    // label: nodeData.label,
    // width: nodeData.width,
    // height: nodeData.height,
    // color: '#fff',

    target: nodeData.target,
    a: 1,
  }
  // console.log(CflowEditorLoaderRef.value)

  CflowEditorLoaderRef.value.startDrag(event, node)
}
const nodes = ref([

])
setTimeout(()=>{
  nodes.value.push(  {
    label:'4654',
    x:30,
    y:30,
    width:50,
    height:50,
    type:'start',
    id:'adad545',
    color:'green',
    zIndex:20
  })
  console.log( nodes.value);
  
},2000)
const nodes2 = ref([])
const connections = ref([])
const canvasSize = ref()
// 获取所有节点
function getNodesValue(value: any) {
  // console.log(value)

  nodes.value = value
  nodes2.value = JSON.parse(JSON.stringify(value))
}
// 获取所有连线
const getConnectionsValue = (value: any) => {
  connections.value = value
}
// 获取画布大小
const getcanvasSize = (e) => {
  canvasSize.value = e
}
setTimeout(() => {
  // saveNodes()
}, 1500)
// 开始预览
const saveNodes = (e) => {
  console.log(CdialogRef.value)

  CdialogRef.value.show('预览')
}
</script>

<style lang="scss" scoped>
.box {
  display: none;
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 9999999999999999999;
}

.hover {
  width: 100%;
  height: 100%;
  color: bisque;
}

// 添加动画字体0%的时候颜色是红色 100%的时候颜色是绿色
.b {
  animation: colorchange 2s infinite;
}

@keyframes colorchange {
  0% {
    background-color: red;
  }

  50% {
    background-color: yellow;
  }

  100% {
    background-color: red;
  }
}
</style>
